@use '../config';
@use '../utils/util';

/* - Effects 盒模型效果 -
************************* */

// Box Shadow
@if util.expect(config.$abbr-box-shadow) {

  @each $key, $value in util.map-handler(config.$map-boxShadow) {

    #{util.class-generator(config.$abbr-box-shadow, $key)}
    {
      box-shadow: $value;
    }

  }

}

// Opacity
@if util.expect(config.$abbr-opacity) {

  @each $key, $value in util.map-handler(config.$map-opacity) {

    #{util.class-generator(config.$abbr-opacity, $key)}
    {
      opacity: $value;
    }

  }

}

// Mix Blend Mode
@if util.expect(config.$abbr-mix-blend-mode) {

  @each $key, $value in (
    normal: normal,
    multiply: multiply,
    screen: screen,
    overlay: overlay,
    darken: darken,
    lighten: lighten,
    color-dodge: color-dodge,
    color-burn: color-burn,
    hard-light: hard-light,
    soft-light: soft-light,
    difference: difference,
    exclusion: exclusion,
    hue: hue,
    saturation: saturation,
    color: color,
    luminosity: luminosity
  ) {

    #{util.class-generator(config.$abbr-mix-blend-mode, $key)}
    {
      mix-blend-mode: $value;
    }

  }

}


// Background Blend Mode
@if util.expect(config.$abbr-background-blend-mode) {

  @each $key, $value in (
    normal: normal,
    multiply: multiply,
    screen: screen,
    overlay: overlay,
    darken: darken,
    lighten: lighten,
    color-dodge: color-dodge,
    color-burn: color-burn,
    hard-light: hard-light,
    soft-light: soft-light,
    difference: difference,
    exclusion: exclusion,
    hue: hue,
    saturation: saturation,
    color: color,
    luminosity: luminosity
  ) {

    #{util.class-generator(config.$abbr-background-blend-mode, $key)}
    {
      background-blend-mode: $value;
    }

  }

}